<hr/>
<form [formGroup]="configForm">
  <div class="form-group row">
    <label class="col-3 col-form-label">Select type:</label>
    <div class="col-9">
      <select class="custom-select" formControlName="typeID">
        <option *ngFor="let typeSelect of typeList" [value]="typeSelect.public_id">{{typeSelect.label}}</option>
      </select>
    </div>
  </div>
  <hr/>
  <section [hidden]="!typeInstance || !manuallyMapping">
    <div class="row">
      <div class="col-md-3">
        <div class="card">
          <div class="card-header">Meta values</div>
          <div class="card-body">
            <div class="list-group">
              <div *ngFor="let control of mappingControls | mappingControl: 'type':'property'"
                   class="list-group-item list-group-item-action"
                   [dndDraggable]="control" [dndEffectAllowed]="allowedEffect"
                   (dndMoved)="onDragged(control, mappingControls, allowedEffect)">
                <span>
                 {{control.label}}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="card mt-3">
          <div class="card-header">Fields</div>
          <div class="card-body">
            <div class="list-group">
              <div *ngFor="let control of mappingControls | mappingControl: 'type':'field'"
                   class="list-group-item list-group-item-action"
                   [dndDraggable]="control" [dndEffectAllowed]="allowedEffect"
                   (dndMoved)="onDragged(control, mappingControls, allowedEffect)">
                <span>
                 {{control.label}}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="card mt-3" *ngIf="hasReferences">
          <div class="card-header">Foreign Keys</div>
          <div class="card-body">
            <div class="list-group">
              <div *ngFor="let control of mappingControls | mappingControl: 'type':'ref'"
                   class="list-group-item list-group-item-action"
                   [dndDraggable]="control" [dndEffectAllowed]="allowedEffect"
                   (dndMoved)="onDragged(control, mappingControls, allowedEffect)">
                <span>
                  <strong>{{control.type_name}}: </strong>{{control.label}}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <template #mappingContainer></template>
        <div class="float-right mt-2">
          <button type="button" class="btn btn-outline-primary" (click)="initMapping()">Reset</button>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <hr/>
  </section>
</form>
<button class="btn btn-primary prev" type="button" awPreviousStep>
  <i class="fas fa-angle-double-left"></i> Previous Step
</button>
<button class="btn btn-primary next" type="button" [disabled]="configForm.invalid"
        awNextStep>
  Next Step <i class="fas fa-angle-double-right"></i>
</button>
